<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Awesome-Webpack by d3viant0ne</title>

    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/github-light.css">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">
        <header>
            <h3 align="center">
<a id="--------" class="anchor" href="#--------" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>
    <img width="355" src="https://raw.githubusercontent.com/d3viant0ne/awesome-webpack/master/media/logo-horizontal.png" alt="Webpack">
      <h4><a id="table-of-contents" class="anchor" href="#table-of-contents" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Table of Contents</h4>

      <ul>
          <li>
              <a href="#webpack-ecosystem">Resources</a>
              <ul>
                  <li><a href="#documentation">Documentation</a></li>
                  <li><a href="#community">Community</a></li>
                  <li><a href="#twitter">Twitter Follows</a></li>
              </ul>
          </li>
          <li>
              <a href="#libraries">Libraries</a>
              <ul>
                  <li>
                      <a href="#loaders">Loaders</a>
                      <ul>
                          <li><a href="#file-type">File Type</a></li>
                          <li><a href="#component--template">Component &amp; Template</a></li>
                          <li><a href="#styles">Styles</a></li>
                          <li><a href="#language--framework">Language &amp; Framework</a></li>
                          <li><a href="#utility">Utility</a></li>
                          <li><a href="#testing">Testing</a></li>
                      </ul>
                  </li>
                  <li><a href="#integration-libraries">Integrations</a></li>
                  <li><a href="#webpack-plugins">Plugins</a></li>
                  <li><a href="#webpack-tools">Tools</a></li>
              </ul>
          </li>
          <li>
              <a href="#research--training">Research &amp; Training</a>
              <ul>
                  <li><a href="#articles">Articles</a></li>
                  <li><a href="#videos">Videos</a></li>
                  <li><a href="#courses">Courses</a></li>
                  <li><a href="#books">Books</a></li>
                  <li><a href="#webpack-examples">Webpack Examples</a></li>
                  <li>
                      <a href="#community-examples">Community Examples</a>
                      <ul>
                          <li><a href="#angular">Angular</a></li>
                          <li><a href="#framework-agnostic">Framework Agnostic</a></li>
                          <li><a href="#react">React</a></li>
                      </ul>
                  </li>
                  <li><a href="#other">Other</a></li>
              </ul>
          </li>
      </ul>
    <p><br></p>

      </header>
      <section>
<br />
<br />
<h2>
<a id="awesome-webpack-" class="anchor" href="#awesome-webpack-" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Awesome Webpack <a href="https://github.com/sindresorhus/awesome"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome"></a>
</h2>
<blockquote>
<p>A curated list of awesome Webpack resources, libraries, tools and applications</p>
</blockquote>

<p>Inspired by the <a href="https://github.com/sindresorhus/awesome">awesome</a> list. Feel free to improve this list by <a href="https://github.com/d3viant0ne/awesome-webpack/blob/master/contributing.md">contributing</a>!</p>
<br />
<br />
<blockquote>
<h2>
<a id="webpack-ecosystem" class="anchor" href="#webpack-ecosystem" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Webpack Ecosystem</h2>
</blockquote>

<h3>
<a id="documentation" class="anchor" href="#documentation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Documentation</h3>

            <ul>
                <li>
                    <a href="http://webpack.github.io/docs/">Webpack 1.x</a> - Webpack 1.x Documentation</li>
                <li>
                    <a href="https://webpack.github.io/webpack.io/">Webpack 2.x</a> - Webpack 2.x Documentation ( Under development )</li>
            </ul>

            <h3>
<a id="community" class="anchor" href="#community" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Community</h3>

            <ul>
                <li><a href="http://stackoverflow.com/tags/webpack">Webpack StackOverflow</a></li>
                <li><a href="https://medium.com/tag/webpack">Webpack Medium</a></li>
                <li><a href="https://gitter.im/webpack/webpack">Webpack Gitter Chat</a></li>
            </ul>

            <h3>
<a id="twitter" class="anchor" href="#twitter" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Twitter</h3>

            <p><em>People passionate about Webpack ( In no particular order )</em></p>

            <ul>
                <li><a href="https://twitter.com/TheLarkInn">Sean T. Larkin - @TheLarkInn</a></li>
                <li><a href="https://twitter.com/bebraw">Juho Vepsäläinen - @bebraw</a></li>
                <li><a href="https://twitter.com/ericclemmons">Eric Clemmons - @ericclemmons</a></li>
                <li><a href="https://twitter.com/gdi2290">Patrick Stapleton - @gdi2290</a></li>
                <li><a href="https://twitter.com/kentcdodds">Kent C. Dodds - @kentcdodds</a></li>
                <li><a href="https://twitter.com/Jhnnns">Johannes Ewald - @Jhnnns</a></li>
                <li><a href="https://twitter.com/shamakry">Kyle Robinson Young - @shamakry</a></li>
                <li><a href="https://twitter.com/d3viant0ne">Joshua Wiens - @d3viant0ne</a></li>
                <li><a href="https://twitter.com/jcreamer898">Jonathan Creamer - @jcreamer898</a></li>
                <li><a href="https://twitter.com/jantimon">Jan Nicklas - @jantimon</a></li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <blockquote>
                <h2>
<a id="-libraries" class="anchor" href="#-libraries" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a> Libraries</h2>
            </blockquote>

            <h3>
<a id="loaders" class="anchor" href="#loaders" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Loaders</h3>

            <h5>
<a id="file-type" class="anchor" href="#file-type" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>File Type</h5>

            <ul>
                <li>
                    <a href="https://github.com/webpack/file-loader">File Loader</a>: File loader module for Webpack. -- <em>Maintained By</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/url-loader">URL Loader</a>: URL loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/html-loader">HTML Loader</a>: HTML loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/raw-loader">Raw Loader</a>: Raw file loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/thetalecrafter/img-loader">Image Loader</a>: Image minimizing loader for webpack. -- <em>Maintainer</em>: <code>Andy VanWagoner</code>
                    <a href="https://github.com/thetalecrafter"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/thetalecrafter"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/bhovhannes/svg-url-loader">SVG Url Loader</a>: Loader which loads SVG file as utf-8 encoded Url. -- <em>Maintainer</em>: <code>Hovhannes Babayan</code>
                    <a href="https://github.com/bhovhannes"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/json5-loader">json5 Loader</a>: json5 loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/json-loader">json Loader</a>: json loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
            </ul>

            <h5>
<a id="component--template" class="anchor" href="#component--template" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Component &amp; Template</h5>

            <ul>
                <li>
                    <a href="https://github.com/TheLarkInn/angular2-template-loader">Angular2 Template Loader</a>: Inlines html and style's in Angular2 components. -- <em>Maintainer</em>: <code>Sean Larkin</code>
                    <a href="https://github.com/TheLarkInn"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/TheLarkInn"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/pcardune/handlebars-loader">Handlebars Loader</a>: A handlebars template loader for Webpack. -- <em>Maintainer</em>: <code>Paul Carduner</code>
                    <a href="https://github.com/pcardune"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/pcardune"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/vuejs/vue-loader">Vue Loader</a>: Webpack loader for Vue.js components. -- <em>Maintainer</em>: <code>Vuejs Team</code>
                    <a href="https://github.com/vuejs"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/vuejs"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/jhamlet/svg-react-loader">SVG React Loader</a> - Webpack SVG to React Component Loader. -- <em>Maintainer</em>: <code>Jerry Hamlet</code>
                    <a href="https://github.com/jhamlet"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/jerryhamlet"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/emaphp/underscore-template-loader">Underscore Loader</a> - Underscore and Lodash template loader. -- <em>Maintainer</em>: <code>Emmanuel Antico</code>
                    <a href="https://github.com/emaphp"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/emaphp"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/WearyMonkey/ngtemplate-loader">ngTemplate Loader</a> - Angular1 Template Loader. -- <em>Maintainer</em>: <code>Toby Rahilly</code>
                    <a href="https://github.com/WearyMonkey"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
            </ul>

            <h5>
<a id="styles" class="anchor" href="#styles" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Styles</h5>

            <ul>
                <li>
                    <a href="https://github.com/webpack/style-loader">Style Loader</a>: Style loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/postcss/postcss-loader">PostCSS Loader</a>: PostCSS loader for Webpack. -- <em>Maintainer</em>: <code>PostCSS Team</code>
                    <a href="https://github.com/postcss"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/PostCSS"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/css-loader">CSS Loader</a>: CSS loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/jtangelder/sass-loader">SASS Loader</a>: SASS loader for Webpack. -- <em>Maintainer</em>: <code>Jorik Tangelder</code>
                    <a href="https://github.com/jtangelder"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/jorikdelaporik"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/less-loader">Less Loader</a>: Less loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/shama/stylus-loader">Stylus Loader</a>: A stylus loader for webpack. -- <em>Maintainer</em>: <code>Kyle Robinson Young</code>
                    <a href="https://github.com/shama"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/shamakry"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/kriasoft/isomorphic-style-loader">Isomorphic Style Loader</a>: Isomorphic CSS style loader for Webpack. -- <em>Maintainer</em>: <code>Kriasoft Team</code>
                    <a href="https://github.com/kriasoft"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/kriasoft"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
            </ul>

            <h5>
<a id="language--framework" class="anchor" href="#language--framework" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Language &amp; Framework</h5>

            <ul>
                <li>
                    <a href="https://github.com/TypeStrong/ts-loader">TS Loader</a>: TypeScript loader for webpack. -- <em>Maintainer</em>: <code>TypeStrong Team</code>
                    <a href="https://github.com/TypeStrong"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/s-panferov/awesome-typescript-loader">Awesome TypeScript Loader</a>: Awesome TS loader for Webpack. -- <em>Maintainer</em>: <code>Stanislav Panferov</code>
                    <a href="https://github.com/s-panferov"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/babel"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/coffee-loader">Coffee Loader</a>: Coffee loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/shakacode/bootstrap-loader">Bootstrap Loader</a>: Load Bootstrap styles in your Webpack bundle. -- <em>Maintainer</em>: <code>ShakaCode Team</code>
                    <a href="https://github.com/shakacode"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/shakacode"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/posthtml/posthtml">PostHTML Loader</a>: PostHTML loader for Webpack. -- <em>Maintainer</em>: <code>PostHTML Team</code>
                    <a href="https://github.com/posthtml"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/PostHTML"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/rtfeldman/elm-webpack-loader">ELM Loader</a>: Webpack loader for the Elm programming language. -- <em>Maintainer</em>: <code>Richard Feldman</code>
                    <a href="https://github.com/rtfeldman"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/rtfeldman"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
            </ul>

            <h5>
<a id="utility" class="anchor" href="#utility" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Utility</h5>

            <ul>
                <li>
                    <a href="https://github.com/babel/babel-loader">Babel Loader</a>: Webpack plugin for Babel. -- <em>Maintainer</em>: <code>Babel Team</code>
                    <a href="https://github.com/babel"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/babel"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/MoOx/eslint-loader">ESLint Loader</a>: ESLint loader for Webpack. -- <em>Maintainer</em>: <code>Maxime Thirouin</code>
                    <a href="https://github.com/MoOx"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/MoOx"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/adrianhall/stylelint-loader">StyleLint Loader</a>: A Webpack Loader for linting SASS, SCSS &amp; CSS. -- <em>Maintainer</em>: <code>Adrian Hall</code>
                    <a href="https://github.com/adrianhall"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/FizzyInTheHall"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/jshint-loader">JSHint Loader</a>: JSHint loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/unindented/jscs-loader">JSCS Loader</a>: Run your source through the JSCS style checker. -- <em>Maintainer</em>: <code>Daniel Perez Alvarez</code>
                    <a href="https://github.com/unindented"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/jshint-loader">JSHint Loader</a>: JSHint loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/bundle-loader">Bundle Loader</a>: Bundle loader for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/worker-loader">Worker Loader</a>: Worker loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/unindented/jscs-loader">JSCS Loader</a>: Resolves relative paths in url() statements. -- <em>Maintainer</em>: <code>Ben Holloway</code>
                    <a href="https://github.com/bholloway"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/imports-loader">Import Loader</a>: Imports loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/source-map-loader">SourceMap Loader</a>: Extract sourceMappingURL comments from modules. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://www.npmjs.com/package/webpack-combine-loaders">Combine Loader</a> - Converts a loaders array into a single loader string. -- <em>Maintainer</em>: <code>James Friend</code>
                    <a href="https://github.com/jsdf"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://www.npmjs.com/package/icons-loader">Icon Font Loader</a> - Generates an iconfont from SVG dependencies. -- <em>Maintainer</em>: <code>Tom Grooffer</code>
                    <a href="https://github.com/tomgrooffer"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
            </ul>

            <h5>
<a id="testing" class="anchor" href="#testing" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Testing</h5>

            <ul>
                <li>
                    <a href="https://github.com/webpack/mocha-loader">Mocha Loader</a>: Mocha loader module for Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/karma-webpack">Karma Webpack</a>: Use Karma with Webpack. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <h3>
<a id="integration-libraries" class="anchor" href="#integration-libraries" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Integration Libraries</h3>

            <ul>
                <li>
                    <a href="https://github.com/ericclemmons/npm-install-webpack-plugin">Terse Webpack</a> - Webpack simplified in a fluent API with presets. -- <em>Maintainer</em>: <code>Eric Clemmons</code>
                    <a href="https://github.com/ericclemmons"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/ericclemmons"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/guybedford/systemjs-webpack-plugin">SystemJS Webpack</a> - Webpack bundling for SystemJS. -- <em>Maintainer</em>: <code>Guy Bedford</code>
                    <a href="https://github.com/guybedford"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/guybedford"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/shama/webpack-stream">Gulp Webpack Stream</a> - Run webpack through a stream interface. -- <em>Maintainer</em>: <code>Kyle Robinson Young</code>
                    <a href="https://github.com/shama"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/shamakry"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <h3>
<a id="webpack-plugins" class="anchor" href="#webpack-plugins" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Webpack Plugins</h3>

            <ul>
                <li>
                    <a href="https://github.com/webpack/extract-text-webpack-plugin">Extract Text Plugin</a>: Extract text from bundle into a file. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/compression-webpack-plugin">Compression Plugin</a>: Prepare assets to serve with Content-Encoding. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/NekR/offline-plugin">Offline Plugin</a>: Offline plugin (ServiceWorker, AppCache) for Webpack. -- <em>Maintainer</em>: <code>Arthur Stolyar</code>
                    <a href="https://github.com/NekR"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/nekrtemplar"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/jhnns/rewire-webpack">Rewire Plugin</a>: Dependency injection for Webpack bundles. -- <em>Maintainer</em>: <code>Johannes Ewald</code>
                    <a href="https://github.com/jhnns"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/Jhnnns"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/ampedandwired/html-webpack-plugin">HTML Webpack Plugin</a>: Simplifies creation of HTML files. -- <em>Maintainer</em>: <code>Jan Nicklas</code>
                    <a href="https://github.com/jantimon"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/jantimon"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/kevlened/copy-webpack-plugin">Copy Webpack Plugin</a>: Copy files and directories in webpack. -- <em>Maintainer</em>: <code>Len Boyette</code>
                    <a href="https://github.com/kevlened"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/kevlened"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/BohdanTkachenko/webpack-split-by-path">Split By Path</a>: Split By Path Webpack Plugin. -- <em>Maintainer</em>: <code>Bohdan Tkachenko</code>
                    <a href="https://github.com/BohdanTkachenko"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/bohdantkachenko"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <h3>
<a id="webpack-tools" class="anchor" href="#webpack-tools" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Webpack Tools</h3>

            <ul>
                <li>
                    <a href="https://github.com/webpack/webpack-dev-middleware">Webpack Dev Middleware</a>: Middleware which arguments a live bundle. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/webpack/webpack-dev-server">Webpack Dev Server</a>: Serves a webpack app. Updates the browser on changes. -- <em>Maintainer</em>: <code>Webpack Team</code>
                    <a href="https://github.com/webpack"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/survivejs/webpack-merge">Webpack Merge</a> - Merge designed for Webpack. -- <em>Maintainer</em>: <code>Juho Vepsäläinen</code>
                    <a href="https://github.com/bebraw"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/bebraw"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/ericclemmons/npm-install-webpack-plugin">NPM Install Webpack</a> - Automatically install &amp; save deps with Webpack. -- <em>Maintainer</em>: <code>Eric Clemmons</code>
                    <a href="https://github.com/ericclemmons"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/ericclemmons"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/js-dxtools/webpack-validator">Webpack Validator</a> - Validates your webpack config with Joi. -- <em>Maintainer</em>: <code>js-dxtools Team</code>
                    <a href="https://github.com/js-dxtools"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
                <li>
                    <a href="https://github.com/kentcdodds/webpack-config-utils">Webpack Config Utils</a> - Util. to make your webpack config easier to read. -- <em>Maintainer</em>: <code>Kent C. Dodds</code>
                    <a href="https://github.com/kentcdodds"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/kentcdodds"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/AngularClass/webpack-toolkit">Angular2 Webpack Toolkit</a> - Webpack tools and helpers for Angular 2. -- <em>Maintainer</em>: <code>AngularClass</code>
                    <a href="https://github.com/AngularClass"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                    <a href="https://twitter.com/AngularClass"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/twitter-square.svg" alt="Twitter"></a>
                </li>
                <li>
                    <a href="https://github.com/HenrikJoreteg/hjs-webpack">HJS Webpack</a>: Helpers/presets for setting up webpack with hotloading. -- <em>Maintainer</em>: <code>Henrik Joreteg</code>
                    <a href="https://github.com/HenrikJoreteg"><img src="https://rawgit.com/d3viant0ne/awesome-webpack/master/media/github-square.svg" alt="Github"></a>
                </li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <blockquote>
                <h2>
<a id="-research--training" class="anchor" href="#-research--training" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a> Research &amp; Training</h2>
            </blockquote>

            <h3>
<a id="articles" class="anchor" href="#articles" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Articles</h3>

            <ul>
                <li>
                    <a href="https://medium.com/@xjamundx/manually-tuning-webpack-builds-284923f47f44#.lbvkidezh">Jamund Ferguson | 22-Jul-16</a> - Manually Tuning Webpack Builds.</li>
                <li>
                    <a href="https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554#.gpoentuxe">Sean T. Larkin | 21-Jul-16</a> - Learn and Debug webpack with Chrome Dev Tools!.</li>
                <li>
                    <a href="https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.qmfmplobc">Raja Rao DV | 10-Apr-16</a> - Webpack  —  The Confusing Parts.</li>
                <li>
                    <a href="http://jonathancreamer.com/webpack-code-splitting-with-es6-and-babel-6/">Jonathan Creamer | 25-Feb-16</a> - WebPack Code splitting with ES6 and Babel 6.</li>
                <li>
                    <a href="https://medium.com/@somebody32/how-to-split-your-apps-by-routes-with-webpack-36b7a8a6231#.iy99i4f7r">Grgur Grisogono | 15-Feb-16</a> - Webpack 2 Tree Shaking Configuration.</li>
                <li>
                    <a href="https://medium.com/modus-create-front-end-development/webpack-2-tree-shaking-configuration-9f1de90f3233#.5pddvz5lz">Ilya Zayats | 07-Feb-16</a> - How to split your apps by routes with Webpack.</li>
                <li>
                    <a href="https://sebastiandedeyne.com/posts/2016/adventure-time-with-webpack">Sebastian De Deyne | 04-Feb-16</a> - Adventure Time With Webpack.</li>
                <li>
                    <a href="http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/">Jonathan Creamer | 10-Jan-16</a> - Advanced WebPack Part 2 - Code Splitting.</li>
                <li>
                    <a href="https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4#.2yutcm8s4">Andy Ccs | 02-Jan-16</a> - Webpack and Docker for Development and Deployment.</li>
                <li>
                    <a href="http://jonathancreamer.com/advanced-webpack-part-3-creating-a-custom-notifier-plugin/">Jonathan Creamer | 08-Jun-16</a> - Advanced WebPack Part 3 - Creating a custom notifier plugin.</li>
                <li>
                    <a href="https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.xb01fcsoq">Nader Dabit | 07-Sept-15</a> - Beginner’s guide to Webpack.</li>
                <li>
                    <a href="http://jonathancreamer.com/advanced-webpack-part-1-the-commonschunk-plugin/">Jonathan Creamer | 02-Sept-15</a> - Advanced WebPack Part 1 - The CommonsChunk Plugin.</li>
                <li>
                    <a href="https://blog.madewithlove.be/post/webpack-your-bags/?utm_content=buffer480f4&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer">Maxime Fabre | 16-Oct-15</a> - Webpack your bags.</li>
                <li>
                    <a href="http://blog.andrewray.me/webpack-when-to-use-and-why/">Andrew Ray | 09-Apr-16</a> - Webpack: When To Use and Why.</li>
            </ul>

            <h3>
<a id="videos" class="anchor" href="#videos" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Videos</h3>

            <ul>
                <li>
                    <a href="https://plus.google.com/events/c76mih8qcjj0ffocpdlcbegvejs">Sean Larkin on AngularAir | 03-Aug-16</a> - ngAir 75 - Webpack 2 with Sean Larkin.</li>
                <li>
                    <a href="https://www.youtube.com/watch?v=PthDwpgrhmQ">Eric Clemmons chat with Kent C. Dodds | 01-Jul-16</a> - Webpack HMR.</li>
                <li>
                    <a href="https://www.youtube.com/playlist?list=PLgGUMhSgtxJyIQ4vI3BzlCzZLHL79Ew6p">Mirko Nasato (5 Part Series) | 07-Jun-16</a> - Angular2 with Webpack Project Setup.</li>
                <li>
                    <a href="https://www.youtube.com/watch?v=MzVFrIAwwS8">Jonathan Creamer at Nodevember | 05-Dec-15</a> - Advanced WebPack.</li>
                <li>
                    <a href="https://www.youtube.com/watch?v=TaWKUpahFZM">Kyle Robinson Young | 08-Jul-15</a> - Getting Started with Webpack.</li>
                <li>
                    <a href="https://www.youtube.com/watch?v=TaWKUpahFZM">Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15</a> - Webpack.</li>
                <li>
                    <a href="https://www.youtube.com/watch?v=ANMN9M9LhNQ">Jeremy Lund at Mountain West JS | 28-Mar-15</a> - Gift Wrap Your Code with Webpack.</li>
            </ul>

            <h3>
<a id="courses" class="anchor" href="#courses" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Courses</h3>

            <ul>
                <li>
                    <a href="https://egghead.io/playlists/intro-to-webpack-4ca2d994">Intro to webpack (playlist)</a> - Egghead.io playlist of a few videos by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a> (the first is free).</li>
                <li>
                    <a href="https://egghead.io/courses/angular-and-webpack-for-modular-applications">Angular and Webpack for modular applications</a> - Egghead.io course by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a>
                </li>
                <li>
                    <a href="https://egghead.io/courses/using-webpack-for-production-javascript-applications">Using Webpack for Production JavaScript Applications</a> - Egghead.io course by <a href="https://twitter.com/kentcdodds">Kent C. Dodds</a> (advanced)</li>
                <li>
                    <a href="https://www.pluralsight.com/courses/webpack-fundamentals">Webpack Fundamentals</a> - <a href="https://twitter.com/josepheames">Joe Eames</a> for Pluralsight (intermediate)</li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>

            <p>
                <br>
            </p>

            <h3>
<a id="books" class="anchor" href="#books" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Books</h3>

            <ul>
                <li>
                    <a href="http://survivejs.com/webpack/introduction/">SurviveJS - Webpack</a>: Free book guiding from a webpack apprentice to master. Covers development, production, and advanced topics.</li>
            </ul>

            <p>
                <br>
            </p>

            <h3>
<a id="webpack-examples" class="anchor" href="#webpack-examples" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Webpack Examples</h3>
            <ul>
                <li>
                    <a href="https://github.com/webpack/webpack/tree/master/examples">Webpack Examples</a>: Examples of common Webpack functionality.</li>
            </ul>

            <p>
                <br>
            </p>

            <h3>
<a id="community-examples" class="anchor" href="#community-examples" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Community Examples</h3>

            <h5>
<a id="angular" class="anchor" href="#angular" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Angular</h5>

            <ul>
                <li>
                    <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack Starter</a> - A Webpack driven Angular 2 Starter kit from <a href="https://github.com/AngularClass">AngularClass</a>.</li>
                <li>
                    <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack</a> - A complete, yet simple, starter for Angular 2 using Webpack from <a href="https://github.com/preboot">Preboot</a>.</li>
                <li>
                    <a href="https://github.com/damienbod/Angular2WebpackVisualStudio">Angular2 Webpack Visual Studio</a> - ASP.NET Core, Angular2 with Webpack and Visual Studio from <a href="https://github.com/damienbod">Damien Bod</a>.</li>
                <li>
                    <a href="https://github.com/schempy/angular2-typescript-webpack">Angular2 Starter</a> - Angular2 starter kit with Typescript and Webpack from <a href="https://github.com/schempy">Brian Schemp</a>.</li>
                <li>
                    <a href="https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa">Angular2 SPA</a> - Angular 2 ASP.NET Core Spa from <a href="https://github.com/SteveSandersonMS">Steve Sanderson</a>.</li>
                <li>
                    <a href="https://github.com/angular/angular2-seed/">Angular2 Seed</a> - A simple starter demonstrating the basic concepts of Angular2 from <a href="https://github.com/pkozlowski-opensource">Pawel Kozlowski</a>.</li>
            </ul>

            <h5>
<a id="framework-agnostic" class="anchor" href="#framework-agnostic" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Framework Agnostic</h5>

            <ul>
                <li>
                    <a href="https://github.com/kentcdodds/es6-todomvc">ES6 TodoMVC with Webpack</a> - Repo used to teach webpack. (Check branches). from <a href="https://github.com/kentcdodds">Kent C. Dodds</a>.</li>
            </ul>

            <h5>
<a id="react" class="anchor" href="#react" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>React</h5>

            <ul>
                <li>
                    <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> - Create React apps with no build configuration from <a href="https://github.com/gaearon">Dan Abramov</a>.</li>
                <li>
                    <a href="https://github.com/kriasoft/react-starter-kit">React Starter Kit</a> - Isomorphic web app boilerplate from <a href="https://github.com/kriasoft">Kriasoft Team</a>.</li>
                <li>
                    <a href="https://github.com/erikras/react-redux-universal-hot-example">React Redux Universal</a> - A starter boilerplate for a universal webapp from <a href="https://github.com/erikras">Erik Rasmussen</a>.</li>
                <li>
                    <a href="https://github.com/tj/frontend-boilerplate">Frontend Boilerplate</a> - A boilerplate of things that mostly shouldn't exist from <a href="https://github.com/tj">TJ Holowaychuk</a>.</li>
                <li>
                    <a href="https://github.com/choonkending/react-webpack-node">React Webpack Node</a> - Your One-Stop solution for a full-stack universal Redux from <a href="https://github.com/choonkending">Ken Ding</a>.</li>
                <li>
                    <a href="https://github.com/benoitvallon/react-native-nw-react-calculator">React Native Calculator</a> - Mobile, desktop and website Apps with the same code from <a href="https://github.com/benoitvallon">Benoit Vallon</a>.</li>
                <li>
                    <a href="https://github.com/unimonkiez/react-cordova-boilerplate">React Cordova Boilerplate</a> - TodoMVC example for React with Cordova from <a href="https://github.com/unimonkiez">Yuval Saraf</a>.</li>
            </ul>

            <h3>
<a id="other" class="anchor" href="#other" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Other</h3>

            <ul>
                <li>
                    <a href="http://jsair.io/webpack">Juho, Johannes, Tobias &amp; Sean on JavaScript Air</a> - <a href="https://javascriptair.com">JavaScript Air</a> podcast</li>
            </ul>

            <p><a href="#table-of-contents">Back to top</a></p>
            </section>
            <footer>
                <p class="view"><a href="https://github.com/d3viant0ne/awesome-webpack">View the Project on GitHub <v-small>d3viant0ne/awesome-webpack</v-small></a></p>
            </footer>
    </div>
    <script src="javascripts/scale.fix.js"></script>

</body>

</html>
